<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Mac官网主页</title>
		<link rel="stylesheet" type="text/css" href="css/06detailPage.css"/>
		<link rel="stylesheet" type="text/css" href="css/公共代码.css"/>
		<link rel="stylesheet" type="text/css" href="图标图标/iconfont.css"/>
	</head>
	<body>
		<!--一,首页列表板块 -->
		<header>
			<div id="box">
				<!-- 左 -->
				<div class="logo"><img src="img/logo.ico" ></div>
				<!-- 中 -->
				<ul class="listlef">
					<li><a href="">人气口红</a></li>
					<li><a href="">热卖底妆</a></li>
					<li><a href="">LISA同款</a></li>
					<li><a href="">全新柔雾唇釉</a></li>
					<li class="newPro">	<a href="">新品推荐</a>
						<div>
							<ul>
								<li><a href="">幻彩无暇粉底液</a></li>
								<li><a href="">全新魅可挚爱柔缎唇膏</a></li>
								<li><a href="">全新麻薯腮红</a></li>
								<li><a href="">定制遮瑕修容</a></li>
								<li><a href="">尤雾弹唇膏</a></li>
								<li><a href="">定制无暇柔光散粉</a></li>
							</ul>
						</div>
					</li>
					<li class="allPro"><a href="">全部产品</a>
						<div>
							<ul>
								<li><a href="">人气推荐</a></li>
								<li><a href="">彩妆</a></li>
								<li><a href="">妆前</a></li>
								<li><a href="">护肤</a></li>
								<li><a href="">扇子和工具</a></li>
							</ul>
						</div>
					</li>
					<li><a href="">会员中心</a></li>
					<li><a href="">门店专柜</a></li>
					<li><a href="">唇妆视频</a></li>
				</ul>
				<!-- 右 -->
				<div class="listrig">
					<ul>
						<a href=""><li class="iconfont icon-fangdajing"></li></a>
						<a href=""><li class="iconfont icon-youxiang"></li></a>
						<!-- <a href="03reg.html"><li class="login">注册/登录</li></a> -->
						<li><span class="reg"><a href="03reg.html">注册</a></span>/<span class="login"><a href="04login.html">登录</a></span></li>
					</ul>
				</div>
				<a href="05shopcar.html"><span class="shopcar iconfont icon-anquanshezhi"></span></a>
			</div>
		</header>
		<section>
			<div id="secBox">
				<div id="secBoxTop">
					<p>脸部 / <a href="">高光修容</a>/魅可立体绒光修容饼</p>
					<div class="topLeft">
						<div class="topleflef">
							<ul>
								<li><img src="img/1.webp" ></li>
								<li><img src="img/2.webp" ></li>
								<li><img src="img/3.webp" ></li>
								<li><img src="img/4.webp" ></li>
								<li><img src="img/5.webp" ></li>
							</ul>
						</div>
						<div class="toplefrig">
							<img src="img/1.webp" >
						</div>
					</div>
					<div class="topRight">
						<p class="topRightOne">BEST SELLER</p>
						<p class="topRightTwo">魅可立体绒光修容饼</p>
						<p class="topRightThr">EXTRA DIMENSION HIGHLIGHTER</p>
						<div class="manycolor">
							<div class="manycolorone"  style="background-color: lightcoral;"></div>
							<div class="manycolorone"  style="background-color: darkgoldenrod;"></div>
							<div class="manycolorone"  style="background-color: sandybrown;"></div>
							<div class="manycolorone"  style="background-color: salmon;"></div>
							<div class="manycolorone"  style="background-color: sandybrown;"></div>
							<div class="manycolorone"  style="background-color: darkkhaki;"></div>
							<div class="manycolorone"  style="background-color: darkorange;"></div>
							<div class="manycolorone"  style="background-color: #F08080;"></div>
							<div class="manycolorone"  style="background-color: chocolate;"></div>
							<div class="manycolorone"  style="background-color: bisque;"></div>
							<div class="manycolorone"  style="background-color: rosybrown;"></div>
							<div class="manycolorone"  style="background-color: khaki;"></div>
						</div>
						<p class="topRightFou">BEST SELLER</p>
						<p class="topRightFiv"><span>DOUBLE GLEAM 生姜高光 </span>细闪米黄色</p>
						<p class="topRightSix">¥340 <span>9克</span></p>
						<select>
							<option>Double Gleam 生姜高光</option>
							<option>Soft Frost</option>
							<option>Superb</option>
							<option>Whisper of Gilt</option>
							<option>Soft Frost</option>
							<option>Superb</option>
							<option>Whisper of Gilt</option>
							<option>Soft Frost</option>
							<option>Superb</option>
							<option>Whisper of Gilt</option>
						</select>
						<div class="addShopCar">
							<div class="addShopCarLeft">
								<a href="">加入购物车</a>
							</div>
							<div class="addShopCarRight">
								<span class="iconfont icon-xiaoxi"><a href="">在线咨询</a></span>
							</div>
						</div>
					</div>
				</div>
				<div id="secBoxMid">
					<div class="secBoxMidBox">
						<p class="secBoxMidOne">免费运输与退换。</p>
						<p class="secBoxMidTwo">任构免邮</p>
						<p class="secBoxMidThr">何时送达</p>
					</div>
				</div>
				<div id="secBoxUnd">
					<ul class="secBoxUndUl">
						<li>完整描述</li>
						<li>产品特点和功效</li>
						<li>成分表</li>
						<li>使用成分</li>
					</ul>
					<div class="secBoxUndContent">
						<div class="secBoxUndContentOne" style="display: block;">Extra Dimension Skinfinish adds the perfect glow to skin. The liquid-powder highlighter, with Extra Dimension Skinfinish adds the perfect glow to skin. The liquid-powder highlighter, with prismatic reflections,  formula lasts up to ten hours.</div>
						<div class="secBoxUndContentOne">Long-wearing, 10 hours <br>Non-acnegenic <br>Dermatologist tested <br>Ophthalmologist tested <br>For all skin types</div>
						<div class="secBoxUndContentOne">Ingredients: Mica, Cetearyl Ethylhexanoate, C12-20 Acid Peg-8 Ester, Hdi/Trimethylol Hexyllactone Crosspolymer, Squalane, Glycerin, Chondrus Crispus (Carrageenan) Extract, Ethylhexylglycerin, Dicalcium Phosphate, Polysorbate 80, 1,2-Hexanediol, Silica, Synthetic Fluorphlogopite, Tin Oxide, Caprylyl Glycol, [+/- Titanium Dioxide (Ci 77891), Iron Oxides (Ci 77491), Iron Oxides (Ci 77492), Iron Oxides (Ci 77499), Bismuth Oxychloride (Ci 77163), Blue 1 Lake (Ci 42090), Carmine (Ci 75470), Manganese Violet (Ci 77742), Ultramarines (Ci 77007), Yellow 5 Lake (Ci 19140)]</div>
						<div class="secBoxUndContentOne">Apply to face using a brush as desired.</div>
					</div>
				</div>
			</div>
		</section>
		<footer>
			<div id="footbox">
				<ul>
					<li class="firstli">门店地址</li>
					<li><a href="">查找门店</a></li>
					<li><a href="">魅可定制美妆</a></li>
					<li class="firstli">会员</li>
					<li><a href="">会员中心</a></li>
				</ul>
				<ul>
					<li class="firstli">客户服务</li>
					<li><a href="">联系我们</a></li>
					<li>官方商城服务热线:</li>
					<li><a href="">400-602-9566</a></li>
					<li>专柜客户关怀热线:</li>
					<li><a href="">400-821-1308</a></li>
					<li><a href="">常见问题</a></li>
					<li><a href="">订单情况</a></li>
				</ul>
				<ul>
					<li class="firstli">关于我们</li>
					<li><a href="">品牌故事</a></li>
					<li><a href="">艾滋病基金会</a></li>
					<li><a href="">M·A·C魅可官网购物五大理由</a></li>
					<li><a href="">M·A·C魅可专业会员</a></li>
					<li class="firstli">公司地址</li>
					<li><a href="">上海市静安区延安中路1228号<br>静安嘉里中心三座11楼</a></li>
				</ul>
				<ul>
					<li class="firstli">账户</li>
					<li><a href="">账户</a></li>
					<li><a href="">订单状态</a></li>
					<li><a href="">我的收藏</a></li>
				</ul>
				<ul>
					<li class="firstli">链接</li>
						<li>
							<a href="">
								<span class="iconfont icon-25"></span>
								<span class="iconfont icon-dingwei1"></span>
								<span class="iconfont icon-xinlang"></span>
							</a>
						</li>
					<li><img src="img/ia_600000032.webp"></li>
				</ul>
			</div>
		</footer>
	</body>
	<script src="js/machine.js"></script>
	<script>
		// 1.获取ul>li和底下的div们
		var secBoxUndliList = $(".secBoxUndUl li");
		var secBoxUndContentDivs = $(".secBoxUndContent div")
		for(var i = 0; i < secBoxUndliList.length; i++){
			//遍历所有li，进行点击事件
			secBoxUndliList[i].index = i;
			secBoxUndliList[i].onclick = function(){
					// 1.先把所有的li全部隐藏
				for(var a = 0 ; a < secBoxUndliList.length; a++){
					secBoxUndliList[a].className = "";
				}
				for(var i = 0; i < secBoxUndContentDivs.length; i++){
					secBoxUndContentDivs[i].style.display = "none";
				}
				secBoxUndContentDivs[this.index].style.display = "block";
			}
		}
		
		
	//思路：点击后，第一个循环把所有的li样式都隐藏，然后添加当前选中的li的样式。
	
	// 第二个循环，把所有的div都隐藏，然后显示点击li的index值和div的index值一致的div块
	
	// 最外层的循环，就是要不断的点击，，不断的执行下面的循环。。。	
	</script>
</html>
